<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <title>Annotorious OpenSeadragon</title>
    <script type='module' src='./index.ts'></script>
    <style>
      html, body, #openseadragon {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }

      .openseadragon-canvas {
        outline: none;
      }
    </style>
  </head>

  <body>
    <div id="openseadragon">
      <div class="buttons" style="position:absolute; top: 10px; right: 10px; z-index: 1;">
        <button id="filter">Toggle Filter</button>
        <button id="move-or-draw">Move</button>
        <button id="undo">Undo</button>
        <button id="redo">Redo</button>
        <button id="style">Change Style</button>
      </div>
    </div>

    <script type='module'>
      import { OpenSeadragon, createOSDAnnotator, W3CImageFormat } from './index.ts';

      var filter = 'SHOW_ALL';

      var filters = {
        'SHOW_ALL': undefined,
        'SHOW_RECTANGLES': a => a.target.selector.type === 'RECTANGLE',
        'SHOW_POLYGONS': a => a.target.selector.type === 'POLYGON'
      };

      // Ashmolean Museum Evans Architectural Plans HF/2
      // const IMAGE = 'https://iiif.bodleian.ox.ac.uk/iiif/image/af315e66-6a85-445b-9e26-012f729fc49c/info.json';

      // Balliol College MS 238A
      const IMAGE = 'https://iiif.bodleian.ox.ac.uk/iiif/image/79bf8325-22fa-4696-afe5-7d827d84f393/info.json';

      window.onload = function() {
        var viewer = OpenSeadragon({
          id: 'openseadragon',
          prefixUrl: 'https://cdn.jsdelivr.net/npm/openseadragon@3.1/build/openseadragon/images/', 
          crossOriginPolicy: 'Anonymous',
          gestureSettingsMouse: {
            clickToZoom: false
          },
          gestureSettingsTouch: {
            pinchRotate: true
          },
          showRotationControl: true,
          tileSources: IMAGE
        });

        const BASE_STYLE = function(a, state) {
          console.log(state);

          const { hovered, selected } = state || {};
          return {
            fill: hovered ? 'rgba(180,0,60,0.7)' : 'rgba(180,0,60,0.5)',
            stroke: '#ff0000', 
            // fillOpacity: 0.1,
            strokeOpacity: 0.9,
            strokeWidth: 3
          }
        };

        var anno = createOSDAnnotator(viewer, {
          autoSave: true,
          // adapter: W3CImageFormat('https://iiif.bodleian.ox.ac.uk/iiif/image/af315e66-6a85-445b-9e26-012f729fc49c'),
          drawingEnabled: false,
          multiSelect: true,
          style: BASE_STYLE,
          // userSelectAction: 'SELECT'
        });

        anno.setDrawingTool('polygon');

        // fetch('annotations.w3c.json').then((response) => response.json())
        fetch('annotations.core.json').then((response) => response.json())
          .then(annotations =>
            anno.setAnnotations(annotations));

        const trigger = document.getElementById('move-or-draw');
        trigger.addEventListener('click', function() {
          if (trigger.innerHTML == 'Move') {
            anno.setDrawingEnabled(true);
            trigger.innerHTML = 'Draw';
          } else {
            anno.setDrawingEnabled(false);
            trigger.innerHTML = 'Move';
          }
        });

        const filterSetting = document.getElementById('filter');
        filterSetting.addEventListener('click', function() {
          if (filter === 'SHOW_ALL') {
            filter = 'SHOW_RECTANGLES';
          } else if (filter === 'SHOW_RECTANGLES') {
            filter = 'SHOW_POLYGONS';
          } else {
            filter = 'SHOW_ALL';
          }

          anno.setFilter(filters[filter]);
          // console.log('Changed filter: ' + filter);
        });

        document.getElementById('undo').addEventListener('click', function() {
          anno.undo();
        });

        document.getElementById('redo').addEventListener('click', function() {
          anno.redo();
        });

        var currentStyle = BASE_STYLE;
        document.getElementById('style').addEventListener('click', function() {
          if (currentStyle === BASE_STYLE) {
            const style = {
              fill: '#0000ff', 
              stroke: '#ff00ff', 
              fillOpacity: 0.1,
              strokeOpacity: 0.9,
              strokeWidth: 3
            };

            anno.setStyle(style);

            currentStyle = style;
          } else {
            anno.setStyle(BASE_STYLE);
            currentStyle = BASE_STYLE;
          }
        });

        anno.on('clickAnnotation', a => console.log('clicked', a));
        anno.on('createAnnotation', a => console.log('created', a));
        anno.on('deleteAnnotation', a => console.log('deleted', a));
        anno.on('selectionChanged', selected => console.log('selection', selected));
        anno.on('updateAnnotation', (a, previous) => console.log('updated', previous, 'with', a));
        // anno.on('viewportIntersect', visible => console.log('visible', visible));

        document.addEventListener('keydown', function(evt) {
          if (evt.key !== 'Escape') return;
          anno.cancelDrawing();
        });

        // Make it global, so we can manipulate in the browser console.
        window.anno = anno;
      }
    </script>
  </body>
</html>